<!--
 * @Description: 
 * @Author: Devin
 * @Date: 2021-11-05 15:14:13
 * @LastEditTime: 2022-02-11 00:37:21
 * @LastEditors: Devin
 * @Reference: 
-->
<template>
  <div class="components">
    <el-card>
      <template #header>
        <div class="el-card-header">普通输入框</div>
        <div class="el-card-header-tip">自动失去焦点去除首位空格</div>
      </template>
      <CcInput v-model="data" size="small" style="margin-bottom: 20px" />
      <CcInput v-model="data" style="margin-bottom: 20px" />
      <CcInput v-model="data" size="large" />
      <Code><div v-html="code.code"></div></Code>
    </el-card>
    <el-card>
      <template #header>
        <div class="el-card-header">复合型输入框</div>
        <div class="el-card-header-tip">添加前缀或后缀元素，通常是标签或按钮。</div>
      </template>
      <CcInput v-model="data" size="small" style="margin-bottom: 20px">
        <template #prepend>Http://</template>
      </CcInput>
      <CcInput v-model="data" style="margin-bottom: 20px">
        <template #append>.com</template>
      </CcInput>
      <CcInput v-model="data" size="large">
        <template #prepend>Http://</template>
        <template #append>.com</template>
      </CcInput>
      <Code><div v-html="code.code1"></div></Code>
    </el-card>
    <el-card>
      <template #header>
        <div class="el-card-header">多行文本输入框</div>
        <div class="el-card-header-tip">改变了一些默认属性值，其余没做修改。</div>
      </template>
      <CcTextarea v-model="data1" />
      <CcInputNumber v-model="data2"></CcInputNumber>
      <Code><div v-html="code.code2"></div></Code>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import code from './code';

export default defineComponent({
  setup() {
    let state = reactive({ data: '', data1: '', data2: '', code });

    return { ...toRefs(state) };
  }
});
</script>

<style scoped></style>
